<style lang="scss" scoped>
.hicon{
	height: 36upx;
	width: 36upx;
	padding-left: 30upx;
	padding-top: 10upx;
}

.model {
    width: 750upx;
    height: 520upx;
    position: absolute;
    background-color: rgba($color: #364161, $alpha: 0.8);
    z-index: 1;
    top: 0;
    left: 0;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-end;
	
	.mtitle{
		margin-top: 20upx;
		width: 700upx;
		margin-left: 25upx;
		font-size: 44upx;
		color: #fff;
		line-height: 64upx;
	}
	
	
	.info-user {
	  display: flex;
	  flex-direction: row;
	  flex-wrap: wrap;
	  justify-content: flex-start;
	  align-items: center;
	  align-content: center;
	  margin-top: 30upx;
	  margin-left: 25upx;
	  margin-bottom: 30upx;
	  .avatar{
		  width: 56upx;
		  height: 56upx;
		  border-radius: 50%;
	  }
	  .info {
	    display: flex;
	    flex-direction: column;
	    flex-wrap: wrap;
	    justify-content: flex-end;
	    align-items: left;
	    margin-left: 20upx;
	    font-size: 24upx;
		font-weight: bolder;
		color: #fff;
	  }
	}
}


.info-content {
  width: 700upx;
  text-align: left;
  margin-top: 40upx;
}

.info-header{
	margin-top: 10upx;
	margin-left: 25upx;
	padding-bottom: 20upx;
	color: #999;
	font-size: 22upx;
	.send{
		margin-right: 20upx;
	}
}

.line{
	height: 30upx;
	width: 750upx;
	background-color: #f3f3f3;
}
</style>

<template>
	<view v-if="getRequestOK">
		<!-- 顶部导航 -->
		<mnav-bar backState="2000" fontColor="#FFF" :titleCenter="false" type="transparent">
			<view slot="left">
				<image class="hicon" src="../static/home.png" mode="aspectFit" @tap="goHome" />
			</view>
		</mnav-bar>
		<mnav-bar v-if="navBarShow" backState="1000" :titleCenter="false">{{ oneInfo.ntitle }}</mnav-bar>


		<!-- 顶部毛玻璃背景图 -->
		<!-- 可选值 xs s m l xl -->
		<pic-blur :params="{
		        width:'750rpx',
		        height:'520rpx',
		        image: oneInfo.cover ? oneInfo.cover.url : oneInfo.medias[0].image.url,
		        blur:'xs'
		    }"></pic-blur>
		<view class="model">
			<!-- 标题 -->
			<view class="mtitle">{{oneInfo.title}}</view>
			<view class="info-user" @tap.stop=" gotoLink( '/feed/otherUser?id=' + oneInfo.user.id ) ">
				<image v-if="!!oneInfo.user.avatar" class="avatar" :src="oneInfo.user.avatar" />
				<image v-else class="avatar" src="../static/ilogo.png" />
				<view class="info">
					<text>{{ oneInfo.user.name == "admin" || oneInfo.user.name == "root" ? '柔宇科技' :  oneInfo.user.name}}</text>
				</view>
			</view>
		</view>


		<!-- 资讯详情 -->
		<view class="info-content">
			<html-parse  :content="oneInfo.content" />
		</view>
		
		<!-- 作者信息 -->
		<view class="info-header">
			<text class="send">{{ oneInfo.created_at | timeFormate }}发布 </text>
			<text>{{ oneInfo.views_count }}阅读</text>
		</view>

		<view class="line" />
		<!-- 产品推荐，资讯 模块的card选择 -->
		<!-- <product-card :product_id="-1"/> -->
		<!-- 评论组件信息 -->
		<comment :data="oneInfo" type="info" ref="comment" />
	</view>
</template>

<script>
	// 引入时间格式化函数
	import timeFrom from "../uview-ui/libs/function/timeFrom.js";
	// 引入富文本解析组件
	import htmlParse from "../components/htmlParse/parse.vue";
	// 引入毛玻璃组件
	import picBlur from "../components/pic-blur/pic-blur.vue";
	// 引入商品卡组件
	import productCard from "../components/basic/productCard.vue";
	// 引入评论组件
	import comment from "../components/basic/comment.vue";
	export default {
		components: {
			htmlParse,
			picBlur,
			productCard,
			comment,
		},
		data() {
			return {
				// 是否显示 navbar
				navBarShow: false,
				// 数据请求状态
				getRequestOK: false,
				// 当前动态详情
				oneInfo: {
					title: '',
					user: {
						avatar: "",
					},
					created_at: "",
					content: "",
					cover: "",
				},
				//是否到达底部
				isReachBottom : false 
			};
		},
		onPageScroll(res) {
			if (res.scrollTop > 300) {
				this.navBarShow = true;
			} else {
				this.navBarShow = false;
			}
		},
		onShow() {
			// 数据埋点
			this.$$Rangers.event('page_view', {
			    platform: '小程序',
			})
			// 数据埋点
			this.$$Rangers.event('infor_page_view', {
				information_type: '长文章',
			    platform: '小程序',
			})
			if (wx.canIUse('hideHomeButton')) {
				wx.hideHomeButton()
			}
		},
		async onLoad(options) {
			
			wx.showShareMenu({
			  withShareTicket: true,
			  menus: ['shareAppMessage', 'shareTimeline']
			})
			uni.showToast({
				title: "数据加载中...",
				icon: "loading",
				duration: 500,
			});
			// 获取当前 资讯详情
			let oneInfo = await this.$u.api.getOneInfo({
				id: options.id,
			});
			if (oneInfo.title.length > 11) {
				oneInfo.ntitle = oneInfo.title.substring(0, 11) + "...";
			} else {
				oneInfo.ntitle = oneInfo.title;
			}
			if (!!oneInfo.user.avatar && !!oneInfo.user.avatar.url) {
				oneInfo.user.avatar = oneInfo.user.avatar.url;
			}
			this.oneInfo = oneInfo;
			this.getRequestOK = true;
		},
		// 分享到朋友圈设置
		onShareTimeline() {
			return {
				title: this.oneInfo.title,
				query: 'id='+this.oneInfo.id,
				imageUrl: this.oneInfo.cover.url
			}
		},
		filters: {
			timeFormate(timeDate) {
				let Time = new Date(timeDate);	
				let timestemp = Time.getTime();
				let t = timeFrom(timestemp, "yyyy年mm月dd日");
				return t;
			},
		},
		onReachBottom(){
			this.$refs.comment.bottomAddData();
			this.isReachBottom = true ;
		},
		onPageScroll({scrollTop}) {
			if(!this.isReachBottom){
				return ;
			}else{
				uni.pageScrollTo({
					scrollTop:scrollTop	-25,
					duration:50
				}) 
				this.isReachBottom = false ;
			}
		},
		methods: {
			goHome() {
				uni.switchTab({
					url: '/pages/index'
				})
			},
			// 跳转到动态列表页面
			gotoLink(url) {
				if (url.indexOf('otherUser') > -1) {
					const user = $storage.get("user");
					if (!!user && !!user.id && user.id == url.split("=")[1]) {
						uni.switchTab({
							url: '/pages/newUser'
						})
						return;
					}
				}
				uni.navigateTo({
					url,
				});
			}
		}
	};
</script>
